<template>
  <div class="wrap">
    <switch-dialog
      :showDialog="chooseDialog.showDialog"
      @cancle="chooseDialog.showDialog = false"
      @choseSwitch="confirmChoose"
    ></switch-dialog>
    <div class="option-row">
      <el-switch
        v-model="showKeyCode"
        active-text="显示按键名称"
        inactive-text="不显示"
      >
      </el-switch>
    </div>
    <div class="keyboard" v-if="switchList.length != 0">
      <div class="row5">
        <key-cell
          v-for="(item, index) of keyboard[0]"
          :key="index"
          :color="item.color"
          :backgroundColor="item.backgroundColor"
          :left="item.left"
          :keyCode="item.keyCode"
          :switchName="item.simpleName"
          :id="item.cellId"
          :showKeyCode="showKeyCode"
          :height="item.height"
          :width="item.width"
          @chooseSwitch="chooseSwitch"
        ></key-cell>
      </div>
      <div class="row4">
        <key-cell
          v-for="(item, index) of keyboard[1]"
          :key="index"
          :color="item.color"
          :backgroundColor="item.backgroundColor"
          :left="item.left"
          :keyCode="item.keyCode"
          :switchName="item.simpleName"
          :id="item.cellId"
          :showKeyCode="showKeyCode"
          :height="item.height"
          :width="item.width"
          @chooseSwitch="chooseSwitch"
        ></key-cell>
      </div>
      <div class="row3">
        <key-cell
          v-for="(item, index) of keyboard[2]"
          :key="index"
          :color="item.color"
          :backgroundColor="item.backgroundColor"
          :left="item.left"
          :keyCode="item.keyCode"
          :switchName="item.simpleName"
          :id="item.cellId"
          :showKeyCode="showKeyCode"
          :height="item.height"
          :width="item.width"
          @chooseSwitch="chooseSwitch"
        ></key-cell>
      </div>
      <div class="row2">
        <key-cell
          v-for="(item, index) of keyboard[3]"
          :key="index"
          :color="item.color"
          :backgroundColor="item.backgroundColor"
          :left="item.left"
          :keyCode="item.keyCode"
          :switchName="item.simpleName"
          :id="item.cellId"
          :showKeyCode="showKeyCode"
          :height="item.height"
          :width="item.width"
          @chooseSwitch="chooseSwitch"
        ></key-cell>
      </div>
      <div class="row1">
        <key-cell
          v-for="(item, index) of keyboard[4]"
          :key="index"
          :color="item.color"
          :backgroundColor="item.backgroundColor"
          :left="item.left"
          :keyCode="item.keyCode"
          :switchName="item.simpleName"
          :id="item.cellId"
          :showKeyCode="showKeyCode"
          :height="item.height"
          :width="item.width"
          @chooseSwitch="chooseSwitch"
        ></key-cell>
      </div>
    </div>
  </div>
</template>
<script>
import { Switch } from "element-ui";
import {
  getAdminKeyboardSwitchList,
  chooseAdminKeyboardSwitch
} from "@/api/admin-keyboard.js";
import SwitchDialog from "@/components/SwitchDialog";
import KeyCell from "./KeyCell";
export default {
  name: "layout-61",
  props: {
    id: Number | String,
    editable: Boolean
  },
  components: {
    [Switch.name]: Switch,
    KeyCell,
    SwitchDialog
  },
  data() {
    return {
      showKeyCode: true,
      switchList: [],
      keyboard: [5],
      chooseDialog: {
        showDialog: false,
        cellId: null
      }
    };
  },
  mounted() {
    this.refreshKeyboard();
    let r5 = [
      { keyCode: "ESC", left: 0 },
      { keyCode: "1", left: 82 },
      { keyCode: "2", left: 164 },
      { keyCode: "3", left: 246 },
      { keyCode: "4", left: 328 },
      { keyCode: "5", left: 410 },
      { keyCode: "6", left: 492 },
      { keyCode: "7", left: 574 },
      { keyCode: "8", left: 656 },
      { keyCode: "9", left: 738 },
      { keyCode: "0", left: 820 },
      { keyCode: "-", left: 902 },
      { keyCode: "=", left: 984 },
      { keyCode: "BackSpace", left: 1066, width: 162 }
    ];
    let r4 = [
      { keyCode: "TAB", left: 0, width: 121 },
      { keyCode: "Q", left: 123 },
      { keyCode: "W", left: 205 },
      { keyCode: "E", left: 287 },
      { keyCode: "R", left: 369 },
      { keyCode: "T", left: 451 },
      { keyCode: "Y", left: 533 },
      { keyCode: "U", left: 615 },
      { keyCode: "I", left: 697 },
      { keyCode: "O", left: 779 },
      { keyCode: "P", left: 861 },
      { keyCode: "[", left: 943 },
      { keyCode: "]", left: 1025 },
      { keyCode: "|", left: 1107, width: 121 }
    ];
    let r3 = [
      { keyCode: "Caps Lock", left: 0, width: 140 },
      { keyCode: "A", left: 143 },
      { keyCode: "S", left: 225 },
      { keyCode: "D", left: 307 },
      { keyCode: "F", left: 389 },
      { keyCode: "G", left: 471 },
      { keyCode: "H", left: 553 },
      { keyCode: "J", left: 635 },
      { keyCode: "K", left: 717 },
      { keyCode: "L", left: 799 },
      { keyCode: ";", left: 881 },
      { keyCode: '"', left: 963 },
      { keyCode: "Enter", left: 1045, width: 183 }
    ];
    let r2 = [
      { keyCode: "Shift", left: 0, width: 180 },
      { keyCode: "Z", left: 183 },
      { keyCode: "X", left: 265 },
      { keyCode: "C", left: 347 },
      { keyCode: "V", left: 429 },
      { keyCode: "B", left: 512 },
      { keyCode: "N", left: 594 },
      { keyCode: "M", left: 676 },
      { keyCode: ",", left: 758 },
      { keyCode: ".", left: 840 },
      { keyCode: "/", left: 922 },
      { keyCode: "Shift", left: 1004, width: 225 }
    ];
    let r1 = [
      { keyCode: "Ctrl", left: 0, width: 101 },
      { keyCode: "Win", left: 104, width: 101 },
      { keyCode: "Alt", left: 208, width: 101 },
      { keyCode: "Space", left: 312, width: 500 },
      { keyCode: "Alt", left: 815, width: 101 },
      { keyCode: "Fn", left: 919, width: 101 },
      { keyCode: "Win", left: 1023, width: 101 },
      { keyCode: "Ctrl", left: 1128, width: 101 }
    ];
    this.keyboard[0] = r5;
    this.keyboard[1] = r4;
    this.keyboard[2] = r3;
    this.keyboard[3] = r2;
    this.keyboard[4] = r1;
  },
  methods: {
    refreshKeyboard() {
      getAdminKeyboardSwitchList(this.id)
        .then(res => {
          res.forEach(item => {
            item.color = "#" + item.color;
            item.backgroundColor = "#" + item.backgroundColor;
          });
          this.switchList = res;
          for (let i = 0; i < this.switchList.length; i++) {
            let row = 0;
            let index = i;
            while (index >= this.keyboard[row].length) {
              index -= this.keyboard[row].length;
              row++;
            }
            let target = this.switchList[i];
            this.keyboard[row][index].color = target.color;
            this.keyboard[row][index].backgroundColor = target.backgroundColor;
            this.keyboard[row][index].simpleName = target.simpleName;
            this.keyboard[row][index].cellId = target.cellId;
          }
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    chooseSwitch(cellId) {
      if(!this.editable){
        return;
      }
      this.chooseDialog.cellId = cellId;
      this.chooseDialog.showDialog = true;
    },
    confirmChoose(switchId) {
      chooseAdminKeyboardSwitch({
        cellId: this.chooseDialog.cellId,
        switchId: switchId
      })
        .then(res => {
          this.refreshKeyboard();
          this.chooseDialog.showDialog = false;
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    }
  }
};
</script>
<style lang="stylus" scoped>
.wrap {
  .option-row {
    height: 40px;
    margin: 10px 0;
  }

  .keyboard {
    padding: 20px;

    .key-switch {
      display: inline-block;
    }

    .row6 {
      position: relative;
      height: 80px;
      margin-bottom: 30px;
    }

    .row5 {
      position: relative;
      height: 80px;
      margin-bottom: 3px;
    }

    .row4 {
      position: relative;
      height: 80px;
      margin-bottom: 3px;
    }

    .row3 {
      position: relative;
      height: 80px;
      margin-bottom: 3px;
    }

    .row2 {
      position: relative;
      height: 80px;
      margin-bottom: 3px;
    }

    .row1 {
      position: relative;
      height: 80px;
    }
  }
}
</style>